<template>
    <ul>
        <li>
            <div class="img-container">
                <img src="../../../static/img/model.jpg" alt="">
            </div>
            <div>
                <span>双眼皮</span>
                <p>说明巴拉巴拉山豆根发射点风格是公司的风格十分的公司</p>
            </div>
            <div>
                <button class="common-btn" :class="{'hot':hot,'normal':!hot}">关注</button>
            </div>
        </li>
        <li>
            <div class="img-container">
                <img src="../../../static/img/model.jpg" alt="">
            </div>
            <div>
                <span>双眼皮</span>
                <p>说明巴拉巴拉</p>
            </div>
            <div>
                <button class="common-btn" :class="{'hot':hot,'normal':!hot}">关注</button>
            </div>
        </li>
        <li>
            <div class="img-container">
                <img src="../../../static/img/model.jpg" alt="">
            </div>
            <div>
                <span>双眼皮</span>
                <p>说明巴拉巴拉</p>
            </div>
            <div>
                <button class="common-btn" :class="{'hot':hot,'normal':!hot}">关注</button>
            </div>
        </li>
        <li>
            <div class="img-container">
                <img src="../../../static/img/model.jpg" alt="">
            </div>
            <div>
                <span>双眼皮</span>
                <p>说明巴拉巴拉</p>
            </div>
            <div>
                <button class="common-btn" :class="{'hot':hot,'normal':!hot}">关注</button>
            </div>
        </li>
        <li>
            <div class="img-container">
                <img src="../../../static/img/model.jpg" alt="">
            </div>
            <div>
                <span>双眼皮</span>
                <p>说明巴拉巴拉</p>
            </div>
            <div>
                <button class="common-btn" :class="{'hot':hot,'normal':!hot}">关注</button>
            </div>
        </li>
        <li>
            <div class="img-container">
                <img src="../../../static/img/model.jpg" alt="">
            </div>
            <div>
                <span>双眼皮</span>
                <p>说明巴拉巴拉</p>
            </div>
            <div>
                <button class="common-btn" :class="{'hot':hot,'normal':!hot}">关注</button>
            </div>
        </li>
 
    </ul>
</template>
<script>
    export default{
        props:{
            hot:{
                type:Boolean
            }
        }
    }
</script>
<style lang="less" scoped>
    ul{
        overflow: hidden;
        li{
            padding: 10px;
            float: left;
            margin-right: 40px;
            margin-bottom: 20px;
            overflow: hidden;
            div{
                // float: left;
                display: inline-block;
                vertical-align: middle;
                &:nth-child(2){
                    width: 180px;
                }
            }
            p{
                margin-top: 15px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            button{
                height: 50px;
                padding-bottom: 10px; 
                width: 100px;
                color: white;
                background-color: transparent;
                background-size: contain;
            }
            .hot{
                background-image:url(../../../static/img/img_btn_hot.png); 
            }
            .normal{
                background-image:url(../../../static/img/img_btn_all.png); 
            }
            .cancle{
                background: #f0f0f0;
            }
            .img-container{
                width: 60px;
                height: 60px;
                border-radius: 30px;
                margin-right: 20px;
            }
        }
    }
</style>

